<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 60px;">
                <div style="width: 300px; float: left;">
                    <hu-select-dict v-model="datasourceId" :selectDic="datasorceList" title="数据源" search />
                </div>
                <div style="width: 300px; float: left;">
                    <hu-input v-model="tableName" title="表名称" />
                </div>
                <div class="top-button">
                    <hu-button @click="catchInfo()" value="获取" size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="getParentChildMatrix()" value="获取父子矩阵"
                        size="big" />&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0" @click="getLogicalForeignKey()" value="获取逻辑外键"
                        size="big" />
                </div>
            </div>
            <hu-table ref="table" v-model="tIndex" :tableInfo="tableInfo" height-reduce="60px" option-width="160" notOption
                checkbox>
            </hu-table>
            <hu-dialog title="获取父子矩阵" top="15%" ref="parentChildMatrixDialogOpen" width="650px" submit="获取脚本"
                @hu-dialog="parentChildMatrixDialog">
                <hu-select-dict search
                    v-model="matrixInfo.showFieldName"
                    :selectDic="columnNameDict"
                    title="显示字段" />
                <hu-select-dict search
                    v-model="matrixInfo.parentFieldName"
                    :selectDic="columnNameDict"
                    title="主键字段" />
                <hu-select-dict search
                    v-model="matrixInfo.childFieldName"
                    :selectDic="columnNameDict"
                    title="父字段名" />
                <hu-input-count v-model="matrixInfo.matrixLevel" title="矩阵层级" step="1"/>
                <div style="height: 15vh;margin-bottom: 7px;">
                    <hu-editor v-model="matrixInfo.filterSQL" :mode="editorMode"></hu-editor>
                </div>
            </hu-dialog>
            <hu-dialog title="SQL" top="15%" ref="sqlDataDialogOpen" width="60vw" submit="确认" @hu-dialog="sqlDataDialog">
                <div style="height: 55vh;margin-bottom: 7px;">
                    <hu-editor v-model="sqlData" :mode="editorMode" autoFormat readOnly></hu-editor>
                </div>
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { selectBaseInfoList, selectColumnDetails } from '@/api/base'
import { parentChildMatrix, foreignKeyOfPrimaryKey } from '@/api/dataopt/query'
import { isEmpty } from '@/utils/validate'
export default {
    name: '删除表数据',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            editorMode: 'sql',
            filterSQL: null,
            sqlData: null,
            datasourceId: null,
            tableName: null,
            tableType: 'BASE TABLE',
            loading: true,
            tIndex: [],
            tableInfo: {
                title: [
                    {
                        value: 'tableSchema',
                        label: '库名',
                        width: '280'
                    }, {
                        value: 'tableName',
                        label: '表名',
                        width: '310'
                    }, {
                        value: 'tableType',
                        label: '表类型',
                        width: '150'
                    }
                    , {
                        value: 'tableComment',
                        label: '表注释',
                        width: '340'
                    },
                ],
                value: []
            },
            datasorceList: [],
            columnNameDict:[],
            matrixInfo:{
                tableName: null, /* 表名 */
                showFieldName: null, /* 矩阵展示时的字段 */
                parentFieldName: null, 
                childFieldName: null,  
                matrixLevel: null, /* 层级 */
                filterSQL: null, /* 过滤SQL */
            }
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.selectDataSourceList();
        this.selectList()
    },
    watch: {

    },
    methods: {
        // 获取数据源字典
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for (let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        selectList() {
            this.loading = false
        },
        // 获取按钮
        catchInfo() {
            if (this.datasourceId == null) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
            } else {
                this.loading = true
                selectBaseInfoList(this.datasourceId, this.tableName, this.tableType).then((res) => {
                    this.loading = false
                    this.tableInfo.value = res.data.data
                }).catch((error => {
                    this.loading = false
                    this.$huTip({ type: 'error', value: error })
                }))
            }
        },
        // 按钮点击检验
        validOnClick() {
            if (this.tIndex.length != 1) {
                this.$huTip({ type: 'warning', value: "请选择一条数据" })
                return false
            }
            if (isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
                return false
            }
            return true
        },
        getParentChildMatrix() {
            if (!this.validOnClick()) {
                return
            }
            this.$refs.parentChildMatrixDialogOpen.openDialog()
            this.tableInfoToColumnNameDict()
        },
        parentChildMatrixDialog(val) {
            if (!val) {
                this.clearFilterSQL()
                return
            } else {
                this.matrixInfo.tableName = this.getTableNameWithIndex()[0]
                parentChildMatrix(this.matrixInfo).then((res) => {
                    this.$refs.parentChildMatrixDialogOpen.closeDialog()
                    this.sqlData = res.data.data
                    this.$refs.sqlDataDialogOpen.openDialog()
                }).catch((error) => {
                    this.$huTip({ type: 'error', value: error })
                })
            }
        },
        // 根据tableInfo获取列字典
        tableInfoToColumnNameDict() {
            this.columnNameDict = []
            this.matrixInfo.filterSQL = `SELECT * FROM \`${this.getTableNameWithIndex()}\` \n`
            selectColumnDetails(this.datasourceId, this.getTableNameWithIndex()).then((res) => {
                const columnDetails = res.data.data
                for(let item of columnDetails) {
                    var obj = {
                        value: item.columnName,
                        label: `${item.columnName}(${isEmpty(item.columnComment)?'暂无注释':item.columnComment})`
                    }
                    this.columnNameDict.push(obj)
                }
            }).catch((error => {
                this.loading = false
                this.$huTip({ type: 'error', value: error })
            }))
        },
        getLogicalForeignKey() {
            if (!this.validOnClick()) {
                return
            }
            this.$huConfirm({
                title: "确认",
                content: `确认获取[${this.getTableNameWithIndex()}]的逻辑外键？`,
                onConfirm: () => {
                    foreignKeyOfPrimaryKey(this.datasourceId, this.getTableNameWithIndex()).then((res) => {
                        this.editorMode = 'application/json'
                        this.sqlData = res.data.data    
                        this.$refs.sqlDataDialogOpen.openDialog()
                    }).catch((error) => {
                        this.$huTip({ type: 'error', value: error })
                    })
                }
            })
        },
        sqlDataDialog(val) {
            if (!val) {
                this.clearFilterSQL()
                return
            }
        },
        // 根据选中的行获取表名集合
        getTableNameWithIndex() {
            let tableName = []
            for (let index of this.tIndex) {
                tableName.push(this.tableInfo.value[index].tableName)
            }
            return tableName
        },
        // 清空过滤函数
        clearFilterSQL() {
            this.filterSQL = ''
        },
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}

.top-button {
    float: left;
    margin-top: 18px;
    margin-left: 10px;
}

.column-box {
    width: 90%;
    margin: 0 auto;

    &-item {
        width: 50%;
        float: left;
    }
}
</style>